<template>
  <div class="live-filter-box">
    <div class="channel-type-box-style" />

    <!-- 创建直播 -->
    <div v-if="createLiveOuterVisible" class="live-details-outter-box">
      <el-dialog :visible.sync="createLiveOuterVisible" @close="dialogClosed">
        <div slot="title" class="header-title">
          <div style="padding:15px 20px; color: white">创建直播</div>
        </div>

        <el-dialog
          width="30%"
          :visible.sync="domainManagerVisible"
          append-to-body
        >
          <div slot="title">
            <div style="padding:15px 20px;">领域管理</div>
          </div>
          <el-form label-width="auto" style="margin-left: 10px">
            <el-form-item>
              <el-input
                v-model="addDomainData.name"
                placeholder="请输入领域名称"
                maxlength="20"
                style="width: 50%; margin-right: 10px;"
              />
              <el-button type="primary" @click="createDomain">添加</el-button>
              <el-button
                type="danger"
                :disabled="domainDeleteBtnDisabled"
                :loading="deleteDomainLoading"
                @click="handleDeleteDomain"
              >删除</el-button>
            </el-form-item>
            <el-form-item>
              <div>
                <el-table
                  ref="multipleTable"
                  :data="domainList"
                  style="width: 100%"
                  height="500"
                  :header-cell-style="elTableHeaderStyle"
                  :cell-style="elTableCellStyle"
                  tooltip-effect="dark"
                  @current-change="domainClickRowChange"
                >
                  <el-table-column label="选择" width="55" style="over">
                    <template slot-scope="scope">
                      <el-radio v-model="createLive.domain" :label="scope.row">
                        <i />
                      </el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="领域名称"
                    align="center"
                  />
                  <el-table-column
                    prop="created_at"
                    label="创建时间"
                    align="center"
                  />
                </el-table>
              </div>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="domainManagerVisible = false">取消</el-button>
            <el-button type="primary" @click="domainManagerVisible = false">确定</el-button>
          </div>
        </el-dialog>

        <el-form ref="createLive" :model="createLive" label-width="auto" style="margin-left: 100px" :rules="inputRules">
          <el-form-item label="标题：" class="el-input-width" prop="title">
            <el-input
              v-model="createLive.title"
              placeholder="请输入直播间名称"
              clearable
            />
          </el-form-item>

          <el-form-item label="直播时间：" prop="timeSelected">
            <el-date-picker
              v-model="createLive.timeSelected"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right"
              @change="liveTimeChanged"
            />
          </el-form-item>

          <el-form-item label="嘉宾签到：">
            <el-switch
              v-model="createLive.EnableSignIn"
              active-color="#13ce66"
              inactive-color="#d7cdcb"
              :active-value="activeValue"
              :inactive-value="inactiveValue"
            />
          </el-form-item>

          <el-form-item label="问卷调查：" class="el-input-width " prop="questionnaire">
            <el-input
              v-model="createLive.questionnaire"
              placeholder="请输入问卷星地址"
              clearable
            />
          </el-form-item>

          <el-form-item label="照片直播：" class="el-input-width ">
            <el-input
              v-model="createLive.PhotoLiveURL"
              placeholder="请输入照片直播地址"
              clearable
            />
          </el-form-item>

          <el-form-item label="所有者：" prop="OwnerAlias" class="el-input-width ">
            <el-autocomplete
              v-model="createLive.OwnerAlias"
              size="medium"
              placeholder="请选择"
              class="search-el_input"
              default-first-option
              :fetch-suggestions="querySearchRoleAsync"
              @change="selectLoadMoreRoles"
              @input="() => this.$refs['createLive'].validateField('OwnerAlias')"
            >
              <!-- <el-option
                v-for="item in rolesList"
                :key="item.id"
                :label="item.RoleName"
                :value="item.RoleName"
                :disabled="item.disabled || false"
              /> -->
            </el-autocomplete>
          </el-form-item>

          <el-form-item label="所属领域：" prop="domain">
            <el-select
              v-model="createLive.domain"
              v-el-select-loadmore="selectLoadMoreDomain"
              size="medium"
              placeholder="请选择"
              class="search-el_input"
              default-first-option
            >
              <el-option
                v-for="item in domainList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
                :disabled="item.disabled || false"
              />
            </el-select>
            <el-button type="text" style="margin-left: 10px;" @click="domainManagerVisible = true">领域管理</el-button>
          </el-form-item>

          <el-form-item label="标签：" class="el-input-width ">
            <el-input
              v-model="createLive.label"
              placeholder="输入标签"
            />
          </el-form-item>

          <el-form-item label="直播介绍：" prop="LiveDescImage">
            <el-upload
              class="avatar-uploader"
              :action="fileUploadAddr"
              :show-file-list="false"
              :on-success="handleLiveDescSuccess"
              :before-upload="beforeAvatarUpload"
              :headers="fileUploadHeaders"
            >
              <img v-if="createLive.LiveDescImage" :src="createLive.LiveDescImage" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>

          <el-form-item label="待播图：" prop="MobileWaitingImage">
            <el-upload
              class="avatar-uploader"
              :action="fileUploadAddr"
              :show-file-list="false"
              :on-success="handleMobileWaitingSuccess"
              :before-upload="beforeAvatarUpload"
              :headers="fileUploadHeaders"
            >
              <img v-if="createLive.MobileWaitingImage" :src="createLive.MobileWaitingImage" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>

          <el-form-item label="频道封面图：" prop="CommonBaseImage">
            <el-upload
              class="avatar-uploader"
              :action="fileUploadAddr"
              :show-file-list="false"
              :on-success="handleCommonBaseSuccess"
              :before-upload="beforeAvatarUpload"
              :headers="fileUploadHeaders"
            >
              <img v-if="createLive.CommonBaseImage" :src="createLive.CommonBaseImage" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="createLiveOuterVisible = false">取消</el-button>
          <el-button type="primary" @click="createLiveReq">提交</el-button>
        </div>
      </el-dialog>
    </div>

    <span class="channel-type-filter">频道分类:</span>
    <div class="channel-type-filter-box">
      <el-radio-group v-model="queryLiveData.domain">
        <el-radio-button class="user-radio" label="all">全部</el-radio-button>
        <el-radio-button v-for="item in liveTypes" :key="item.id" class="user-radio" :label="item.name">{{ item.name }}</el-radio-button>
      </el-radio-group>
    </div>

    <span class="channel-tag-filter">频道标签:</span>
    <div class="channel-label-filter-box">
      <el-radio-group v-model="queryLiveData.label">
        <el-radio-button class="user-radio" label="all">全部</el-radio-button>
      </el-radio-group>
    </div>

    <el-select v-model="queryLiveData.filter1" placeholder="请选择" class="filter-select1">
      <el-option
        v-for="(item, key) in filterSelect1"
        :key="key"
        :label="item.label"
        :value="item.value"
        :v-bind="queryLiveData.filter1"
      />
    </el-select>

    <a @click="changeOrder">
      <img class="filter-sort-img" src="../../../../assets/sort.png">
    </a>

    <el-select v-model="queryLiveData.filter2" class="filter-select2" placeholder="请选择">
      <el-option
        v-for="(item, key) in filterSelect2"
        :key="key"
        :label="item.label"
        :value="item.value"
        :v-bind="queryLiveData.filter2"
      />
    </el-select>

    <el-date-picker
      v-model="timeFilterStartTemp"
      class="filter-time-range"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right"
      clearable
      value-format="yyyy-MM-dd HH:mm:ss"
      @change="timeFilterPick"
    />

    <div class="filter-fuzzy-search">
      <el-input v-model="fuzzyKeywordTemp" placeholder="请输入内容" class="input-with-select">
        <el-button slot="append" class="search-button" icon="el-icon-search" @click="fuzzySearch" />
      </el-input>
    </div>
    <el-pagination
      class="page-box"
      :total="dataCount"
      :page-size="queryLiveData.length"
      background
      layout="total, prev, pager, next, jumper"
      @prev-click="changePage"
      @next-click="changePage"
      @current-change="changePage"
    />
    <div class="lives-list-boxs" style="order: 0">
      <div class="live-list-box">
        <a>
          <img class="create-live-img" src="../../../../../src/assets/createLive.png" @click="createLiveOuterVisible = true">
        </a>
        <span>新建直播频道</span>
      </div>

      <div v-for="(item, key) in filterLives" :key="key" class="live-list-box">
        <el-image :src="item.MobilePlayListImage" class="live-list-image" />
        <div id="live-list-title">
          {{ item.title }}
        </div>
        <el-button class="live-list-delete-btn" type="text" @click="deleteLiveID = item.id, isEnableDeleteLiveTips = true">删除</el-button>
        <div class="live-list-detail-box">
          <span>直播开始时间: {{ item.StartTime }}</span>
          <span>最后直播时间: 该频道未直播过</span>
          <span>所属分类: {{ item.domain }}</span>
          <span>观看量: <span style="color: #2E9BEA">{{ item.PlayCount }}</span> 次
            <span style="left: 40px;">观看总时长: <span style="color: #2E9BEA">{{ Math.floor(item.duration / 60) }}</span> 分钟</span>
          </span>
        </div>
        <div class="live-list-button-box">
          <a @click="jump2LiveManager(item)">
            <img id="live_list_zhuangxiu_logo" src="../../../../../src/assets/live_list_zhuangxiu.png">
          </a>
          <div class="live-list-button-line" />
          <a @click="jump2DataStatistics(item)">
            <img id="live_list_data_logo" src="../../../../../src/assets/live_list_data.png">
          </a>
          <div class="live-list-button-line" />
          <a @click="openNewWindow(item)">
            <img id="live_list_pc_logo" src="../../../../../src/assets/live_list_pc_overview.png">
          </a>
          <div class="live-list-button-line" />
          <a @click="displayLiveQRCode(item)">
            <img id="live_list_phone_logo" src="../../../../../src/assets/live_list_phone.png">
          </a>
        </div>
      </div>
    </div>

    <!-- 二维码图片 -->
    <el-dialog
      lable="直播二维码"
      :visible.sync="qrCodeVisible"
      class="live-list-qrcode-box"
      destroy-on-close
    >
      <el-image
        :src="qrCodeImageB64"
        fit="fill"
      />
      <el-button type="primary" @click="qrCodeVisible = false">关闭</el-button>
    </el-dialog>

    <el-dialog
      title="删除直播提示"
      :visible.sync="isEnableDeleteLiveTips"
      width="30%"
    >
      <span>是否删除直播？删除后数据不可恢复</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEnableDeleteLiveTips = false">取消</el-button>
        <el-button type="danger" @click="handleDeleteLiveReq">删除</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  createLive,
  liveList,
  listChannelTypes,
  deleteChannelType,
  createChannelType,
  getRoles,
  deleteLive,
  getLiveQRCode
} from '@/api/lives'

export default {
  directives: {
    'el-select-loadmore': {
      bind(el, binding) {
        // 获取element-ui定义好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
        SELECTWRAP_DOM.addEventListener('scroll', function() {
          /**
				  * scrollHeight 获取元素内容高度(只读)
				  * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直	方向的滚动条, 那它的scrollTop的值默认为0.
				  * clientHeight 读取元素的可见高度(只读)
				  * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
				  * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
          */
          const condition = this.scrollHeight - (this.scrollTop + 1) <= this.clientHeight
          if (condition) {
            binding.value()
          }
        })
      }
    }
  },
  data() {
    return {
      inputRules: {
        title: [
          { required: true, message: '请输入直播间名称', trigger: 'blur' }
        ],
        timeSelected: [
          { type: 'array', required: true, message: '请选择直播时间', trigger: 'blur' }
        ],
        OwnerAlias: [
          { required: true, message: '请输选择一个所有者', trigger: 'blur' }
        ],
        domain: [
          { required: true, message: '请选择一个领域', trigger: 'blur' }
        ],
        LiveDescImage: [
          { required: true, message: '请上传直播介绍图片', trigger: 'blur' }
        ],
        MobileWaitingImage: [
          { required: true, message: '请上传待播图片', trigger: 'blur' }
        ],
        CommonBaseImage: [
          { required: true, message: '请上传直播封面图片', trigger: 'blur' }
        ]
      },
      qrCodeVisible: false,
      // 直播二维码
      qrCodeImageB64: '',
      deleteLiveID: '',
      // 删除直播强出消息框
      isEnableDeleteLiveTips: false,
      rolesList: [],
      fileUploadHeaders: {
        Authorization: ''
      },
      // 文件上传地址
      fileUploadAddr: '',
      deleteDomainLoading: false,
      domainDeleteBtnDisabled: true,
      domainManagerVisible: false,
      createLiveOuterVisible: false,
      createLiveinnerVisible: false,
      // 直播权限 public 公开；private 部分公开；
      livePermission: 'public',
      domainList: [],
      timeSelected: [],
      queryLiveData: {
        start: 1,
        length: 14,
        keyword: '',
        label: 'all',
        order_key: '',
        order: 'desc',
        startTime: '',
        endTime: '',
        domain: 'all'
        // filter1: 'duration',
        // filter2: 'alltype'

      },
      // 添加直播领域数据
      addDomainData: {
        name: ''
      },
      // 显示数据
      displayData: {
        CommonBaseImage: ''
      },
      // 创建直播数据
      createLive: {
        title: '',
        questionnaire: '',
        AutoRecorde: true,
        StartTime: '',
        EndTime: '',
        label: '',
        OwnerAlias: '',
        HospitalRoleName: '',
        domain: '',
        status: '',
        LiveDescImage: '',
        PhotoLiveURL: '',
        allow_roles: [],
        AuthType: this.livePermission,
        MobileWaitingImage: '',
        CommonBaseImage: '',
        timeSelected: [],
        EnableSignIn: true
      },
      activeValue: true,
      inactiveValue: false,
      dataCount: 0,
      filterLives: [],
      liveTypes: [],
      filterSelect1: [{ label: '累计观看时长', value: 'duration' }],
      filterSelect2: [{ label: '全部直播方式', value: 'alltype' }],
      input: '',
      // 角色query参数
      userRolesQuery: {
        start: 1,
        length: 14
      },
      // 所属领域过虑参数
      domainQuery: {
        start: 1,
        length: 14
      },
      select: '',
      // 关键字查询临时保存，点击搜索才发起请求
      fuzzyKeywordTemp: '',
      // 时间搜索临时保存
      timeFilterStartTemp: undefined,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'token',
      'roles'
    ])
  },
  watch: {
    queryLiveData: {
      handler(val) {
        this.refreshLive()
      },
      deep: true
    },
    'token'(n, o) {
      this.fileUploadHeaders.Authorization = this.token
    }
  },
  async mounted() {
    const resp = await liveList(this.queryLiveData)
    this.filterLives = resp.data
    this.dataCount = resp.count
    const respDomain = await listChannelTypes()
    this.liveTypes = respDomain.data
    
    // 领域信息
    var domainResp = await listChannelTypes(this.domainQuery)
    this.domainList = domainResp.data
    // 上传文件的地址
    this.fileUploadAddr = process.env.VUE_APP_BASE_API + '/api/v1/files'
    // 设置访问头
    this.fileUploadHeaders.Authorization = this.token
  },
  methods: {
    // 点击频道装修处理
    jump2LiveManager(item) {
      this.$router.push('/channel/subject')
      this.ChangeCurrentChoiceLive(item)
    },
    // 点击数据统计处理
    jump2DataStatistics(item) {
      this.$router.push('/statistics')
      this.ChangeCurrentChoiceLive(item)
    },
    // 点击PC端打开新页面
    openNewWindow(item) {
      var redictURL = process.env.VUE_APP_PC_BASE_API + '/video.html?id=' + item.id
      window.open(redictURL, '_blank')
    },
    // 点击手机端处理
    async displayLiveQRCode(item) {
      var qrcodeRes = await getLiveQRCode(item.id, { type: '222' })
      this.qrCodeImageB64 = `data:image/png;base64,` + qrcodeRes.data.url
      console.log(this.qrCodeImageB64)
      this.qrCodeVisible = true
    },
    // 改变当前选择的直播以及vux中的值
    ChangeCurrentChoiceLive(liveData) {
      this.$store.dispatch('lives/setchoiceLive', liveData)
    },
    // 删除直播
    handleDeleteLiveReq() {
      deleteLive(this.deleteLiveID).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          // 刷新数据
          this.refreshLive()
        }
      })
      this.isEnableDeleteLiveTips = false
    },
    // 上传前处理
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 5

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!')
      // }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }
      // return isJPG && isLt2M
      return isLt2M
    },
    // 直播介绍上传成功回调
    handleLiveDescSuccess(res, file) {
      if (res.data.length > 0) {
        this.createLive.LiveDescImage = res.data[0].AccessAddress
      }
    },
    // 待播图
    handleMobileWaitingSuccess(res, file) {
      if (res.data.length > 0) {
        this.createLive.MobileWaitingImage = res.data[0].AccessAddress
      }
    },
    // 通用图片
    handleCommonBaseSuccess(res, file) {
      if (res.data.length > 0) {
        this.createLive.CommonBaseImage = res.data[0].AccessAddress
      }
    },
    async querySearchRoleAsync(queryString, cb) {
      if (this.isGetAllRoles) {
        return
      }

      const res = await getRoles({
        start: 1,
        length: 99,
        keyword: queryString
      })
      cb(
        res.data.map((el) => ({
          value: el.RoleName,
          label: el.RoleName,
          disabled: !!el.disabled
        }))
      )
    },
    selectLoadMoreRoles() {
      if (this.isGetAllRoles) {
        return
      }
      this.userRolesQuery.start += 1
      getRoles(this.userRolesQuery).then((res) => {
        if (res.data.length > 0) {
          this.rolesList = this.rolesList.concat(res.data)
        } else {
          this.rolesList = this.rolesList.concat([{ 'RoleName': '没有更多数据了', disabled: true }])
          this.isGetAllRoles = true
        }
        
      })
    },
    // 下拉列表触底加载更多领域
    selectLoadMoreDomain() {
      if (this.isGetAllDomain) {
        return
      }
      this.domainQuery.start += 1
      listChannelTypes(this.domainQuery).then((res) => {
        if (res.data.length > 0) {
          this.domainList = this.domainList.concat(res.data)
        } else {
          this.domainList = this.domainList.concat([{ 'name': '没有更多数据了', disabled: true }])
          this.isGetAllDomain = true
        }
      })
    },
    elTableHeaderStyle() {
      return {
        background: '#F0F1F2',
        font_size: '18px',
        font_family: 'PingFang SC',
        font_weight: 400,
        color: '#6D7A8E'
      }
    },
    elTableCellStyle() {
      return {
        font_size: '20px',
        font_family: 'PingFang SC',
        font_weight: 400,
        color: '#8B9DBA'
      }
    },
    // 直播领域选择
    domainClickRowChange(ev) {
      this.domainDeleteBtnDisabled = false
      this.domainRadioRow = ev
    },
    // 删除直播领域
    handleDeleteDomain() {
      this.deleteDomainLoading = true
      if (!this.domainRadioRow) {
        this.$message.error('请选择一条数据')
      }
      deleteChannelType(this.domainRadioRow.id).then((res) => {
        this.domainDeleteBtnDisabled = false
        // 领域信息
        listChannelTypes(this.domainQuery).then((domainResp) => {
          this.domainList = domainResp.data
        })
      })
      this.$message({
        message: '删除成功',
        type: 'success'
      })
      this.deleteDomainLoading = false
    },
    // 添加直播领域
    createDomain() {
      createChannelType(this.addDomainData).then((res) => {
        if (res.code === 200) {
          this.domainList.unshift(res.data)
          this.$message({
            message: '添加成功',
            type: 'success'
          })
        }
      }).catch(() => {
        this.$message.error('添加失败')
      })
    },
    // 更新直播请求
    createLiveReq() {
      this.$refs['createLive'].validate((valid) => {
        if (valid) {
          createLive(this.createLive).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: '创建成功',
                type: 'success'
              })
            }
            // 刷新数据
            liveList(this.queryLiveData).then((resp) => {
              this.filterLives = resp.data
              this.dataCount = resp.count
            })
            this.createLiveOuterVisible = false
          }).catch(() => {
            this.$message.error('创建失败')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    changeOrder() {
      if (this.queryLiveData.order === 'desc') {
        this.queryLiveData.order = 'asc'
      } else {
        this.queryLiveData.order = 'desc'
      }
    },
    fuzzySearch(ev) {
      this.queryLiveData.keyword = this.fuzzyKeywordTemp
    },
    timeFilterPick(ev) {
      this.queryLiveData.startTime = ev[0]
      this.queryLiveData.endTime = ev[1]
    },
    async refreshLive() {
      const resp = await liveList(this.queryLiveData)
      this.filterLives = resp.data
      this.$store.dispatch('lives/setliveTypes', true)
    },
    changePage(ev) {
      if (ev) {
        this.queryLiveData.start = ev
      }
    },
    // 关闭弹窗
    dialogClosed() {
      this.userRolesQuery.start = 1
      this.rolesList = []
      this.domainQuery.start = 1
      this.domainList = []
    },
    // 直播时间改变事件
    liveTimeChanged(ev) {
      this.createLive.StartTime = ev[0]
      this.createLive.EndTime = ev[1]
    }
  }
}
</script>

<style lang="scss" scoped>
.live-filter-box {
  width: 1616px;
  height: 972px;
  background: #FFFFFF;
  border-radius: 10px;
  position: absolute;
  display: flex;
  left: 260px;
  top: 271px;
}
.channel-type-box-style {
  width: 4px;
  height: 28px;
  background: #2E9BEA;
  border-radius: 2px;
  top: 31px;
  position: absolute;
  border: 0px;
}

.user-radio {
  margin: 0 0px 0px;

  &-div{
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #6D7A8E;
  }
  &-p{
    font-size: 16px;
  }
  // 因为设置了scoped，所以固定的classname要用::v-deep操作
  ::v-deep {
    .el-radio-button__inner {
      border: none;
      border-radius: 4px;
      color: #6D7A8E;
      font-size: 20px;
    }
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background: #2E9BEA;
      border-radius: 7px;
      font-weight: 400;
      color: #FFFFFF;
      font-size: 20px;

    }
  }
}
.channel-type-filter {
  width: auto;
  height: auto;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #6D7A8E;
  position: absolute;
  top: 35px;
  left: 58px;
}
.channel-tag-filter {
  width: auto;
  height: auto;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #6D7A8E;
  position: absolute;
  left: 58px;
  top: 92px;

}
.channel-type-filter-box {
  border-radius: 7px;
  position: absolute;
  left: 174px;
  top: 29px;
}
.channel-label-filter-box {
  position: absolute;
  top: 87px;
  left: 173px;
}
.el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
.filter-select1 {
  position: absolute;
  top: 139px;
  left: 47px;
}
.filter-sort-img {
  position: absolute;
  top: 138px;
  left: 249px;
  width: 31px;
  height: 37px;
}
.filter-select2 {
  position: absolute;
  top: 139px;
  left: 357px;
}
.filter-time-range {
  position: absolute;
  top: 139px;
  left: 629px;
}
.filter-fuzzy-search {
  position: absolute;
  top: 139px;
  left: 1212px;
}
.lives-list-boxs {
  width: 1514px;
  height: 689px;
  background: #F5F6F7;
  display: flex;
  position: relative;
  top: 233px;
  flex-wrap: wrap;
  overflow-y: auto;
  justify-content: flex-start;
}
.live-list-box {
  width: calc(50% - 80px);
  height: 327px;
  box-shadow: 0px 8px 7px 0px rgba(93, 133, 162, 0.39);
  margin: 40px;
  background-color: #FFFFFF;
  position: relative;
  span {
    width: 100%;
    height: 29px;
    font-size: 30px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #CDCECE;
    position: absolute;
    left: 0;
    top: 228px;
    text-align: center;
  }
  .live-list-delete-btn {
    position: absolute;
    right: 20px;
    top: 5px;
  }
}
.create-live-img {
  width: 96px;
  height: 96px;
  position: relative;
  left: 283px;
  top: 88px;
}
.live-list-image {
  position: relative;
  width: 122px;
  height: 122px;
  top: 46px;
  left: 33px;
  border: 1px solid black;
}
#live-list-title {
  position: absolute;
  width: 470px;
  height: 24px;
  font-size: 24px;
  line-height: 22px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #51729A;
  top: 46px;
  left: 177px;
  margin-right: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
#live-list-start-time {
  width: auto;
  height: 20px;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #B2B0B0;
}
#live-list-view-times {
  width: auto;
  height: 20px;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #99A1AE;
}
#inner-view-coloer {
width: auto;
height: 20px;
font-size: 20px;
font-family: PingFang SC;
font-weight: 400;
color: #2E9BEA;
left: auto;
top: auto;
}
.live-list-detail-box {
  height: 200px;
  flex-direction: column;
  width: 482px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  position: absolute;
  left: 177px;
  top: 95px;
  span {
    position: relative;
    top: 0px;
    left: 0px;
    width: auto;
    height: 20px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #B2B0B0;
    margin-top: 7px;
    margin-bottom: 7px;
  }
}
.live-list-button-box {
  width: 675px;
  height: 70px;
  background: #F5FAFC;
  display: flex;
  position: absolute;
  justify-content: space-around;
  flex-wrap: nowrap;
  align-items: center;
  top: 257px;
  left: 0px;
  #live_list_zhuangxiu_logo {
    width: 30px;
    height: 28px;
  }
  #live_list_data_logo {
    width: 22px;
    height: 26px;
  }
  #live_list_pc_logo {
    width: 32px;
    height: 26px;
  }
  #live_list_phone_logo {
    width: 21px;
    height: 29px;
  }
}
.live-list-button-line {
  width: 1px;
  height: 38px;
  background: #7FABCB;
  border-radius: 1px;
}
.page-box {
  height: 20px;
  position: absolute;
  right: 30px;
  top: 190px;
}
.live-details-outter-box {
    width: 975px;
    height: 783px;
    // position: absolute;
  ::v-deep {
    .el-dialog__header {
      padding: 0px;
      padding-bottom: 0px;
    }
    .header-title {
      background: #FEFFFF;
      border: 1px solid #B2B2B2;
      opacity: 1;
      border-radius: 3px;
      background: #2E9BEA;
      border-radius: 2px;
    }
  .el-dialog__headerbtn, .el-dialog__close {
        width: 29px;
        height: 29px;
        opacity: 1;
        color: white;
      }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 96px;
      height: 96px;
      }
  .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
  .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 96px;
      height: 96px;
      // line-height: 178px;
      text-align: center;
      }
  .avatar {
      width: 96px;
      height: 96px;
      display: block;
    }
  .el-icon-plus {
    align-items: center;
    display: flex;
    justify-content: center;
    }
  }
  #title-text {
    font-size: 14px;
    font-family: PingFangSC-Regular;
    line-height: 35px;
    color: #6D7A8E;
    opacity: 1;
  }
  .el-icon-copy-document {
    margin-left: 5px;
  }
}
.image-inline-box {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  text-align: center;
  .image-and-text-display {
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
  }
}
.el-input-width {
  width: 50%;
}
.live-list-qrcode-box {
  .el-button {
    width: 100px;
  }
  ::v-deep {
    .el-dialog__body {
        color: #606266;
        font-size: 14px;
        word-break: break-all;
        width: 500px;
        height: auto;
        display: flex;
        align-content: center;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .el-dialog__header {
      padding: 0px;
      padding-bottom: 0px;
    }
    .el-dialog {
      width: 500px;
    }
  }
}

.search-el_input {
  width: 398px;
  height: 50px;

  ::v-deep .el-input--medium .el-input__inner {
    width: 398px;
    height: 50px;
  }
}

</style>
